<template>
  <div class="tab-container">
    <el-row>
      <el-col :span="24">
        <el-form ref="editForm" :inline="true" :model="editForm" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
          <el-row>
            <el-form-item label="登录账号:" prop="account">
              {{ editForm.account }}
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="新密码:" prop="password">
              <el-input v-model="editForm.password" size="small" type="password" placeholder="输入新的密码"/>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="确认密码:" prop="checkNewPwd">
              <el-input v-model="editForm.checkNewPwd" size="small" type="password" placeholder="再次输入新的密码"/>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin-left:20px;">
              <el-button type="primary" size="small" @click="haldePwd">立即修改</el-button>
              <el-button type="info" size="small" @click="editFormReset('editForm')">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editPwd } from '@/api/user'

export default {
  name: 'EditPwd',
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.editForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateNewPwd = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9]{6,20}$/
      if (value === '') {
        callback(new Error('请输入新登录密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码为6-20位数字字母组合'))
      } else if (value === this.editForm.oldPwd) {
        callback(new Error('不能与旧密码一致!'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'right',
      labelWidth: '100px',
      editForm: {
        account: '',
        password: '',
        checkNewPwd: ''
      },
      rules: {
        password: [
          { required: true, validator: validateNewPwd, trigger: 'blur' }
        ],
        checkNewPwd: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    this.editForm.account = this.user.account
  },
  methods: {
    editFormReset(name) {
      this.$refs[name].resetFields()
    },
    haldePwd() {
      console.log(this.user)
      const vmThis = this
      this.$refs.editForm.validate(valid => {
        if (valid) {
          // this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
          //   this.loading = false
          //   this.$router.push({ path: this.redirect || '/' })
          // }).catch(() => {
          //   this.loading = false
          // })
          const id = vmThis.user.id
          editPwd(id, vmThis.editForm).then(response => {
            console.log(response)
          }).catch(() => {

          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tab-container{
    margin-top: 20px;
  }
</style>
